<template>
	<view class="payment_success">
		<view class="payment_success_header">
			<image src="http://qianxueapplet.suoeryun.com/done.png"
				class="payment_success_header_1"></image>
			<view class="payment_success_header_2">支付成功！</view>
			<view class="payment_success_header_3">您已成功支付，感谢您的购买！</view>
		</view>
		<view class="payment_success_order">
			<view class="payment_success_order_item">
				<text class="payment_success_order_item_1">已付金额：</text>
				<text class="payment_success_order_item_2">¥{{data?.amountPayable}}</text>
			</view>
			<view class="payment_success_order_item">
				<text class="payment_success_order_item_1">送货地址：</text>
				<text class="payment_success_order_item_2 overflow">{{data?.address}}</text>
			</view>
			<view class="payment_success_order_item">
				<text class="payment_success_order_item_1">订单编号：</text>
				<text class="payment_success_order_item_2">{{data?.orderId}}</text>
			</view>
		</view>
		<view class="payment_success_btn">
			<button class="home" @click="handleHome">返回好物</button>
			<button class="order" @click="handleOrder">我的订单</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';

	const data = ref();

	onLoad((options) => {
		console.log(options);
		data.value = options;
	})

	/**
	 * 返回首页
	 */
	function handleHome() {
		uni.$u.route({
			url: 'pages/goodStuff/goodStuff',
			type: 'switchTab'
		})
	}
	/**
	 * 我的订单
	 */
	function handleOrder() {
		uni.$u.route({
			url: 'pages/goodStuff/myOrder',
			type: 'redirectTo'
		})
	}
</script>

<style lang="scss" scoped>
	.payment_success {
		.payment_success_header {
			text-align: center;
			margin-top: 86rpx;
			margin-bottom: 78rpx;

			.payment_success_header_1 {
				width: 138rpx;
				height: 138rpx;
				margin: 0 auto;
			}

			.payment_success_header_2 {
				padding: 38rpx 0 20rpx 0;
				font-size: 40rpx;
				font-weight: 500;
			}

			.payment_success_header_3 {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.payment_success_order {
			padding: 0 26rpx;

			.payment_success_order_item {
				font-size: 28rpx;
				margin-bottom: 14rpx;
				display: flex;

				.payment_success_order_item_1 {
					color: rgba(0, 0, 0, 0.5);
				}

				.payment_success_order_item_2 {
					flex: 1;
					width: calc(100vw - 26rpx - 26px - 55px);
				}
			}
		}

		.payment_success_btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 35rpx;

			button {
				margin: 0;
				padding: 0;
				border-radius: 862rpx;
				width: 300rpx;
				height: 70rpx;
				line-height: 68rpx;
				font-size: 32rpx;
				border: 2rpx solid #FF943C;

				&::after {
					border: 0;
				}

				&.home {
					background-color: #fff;
					color: #FF943C;
				}

				&.order {
					background-color: #FF943C;
					color: #fff;
				}
			}
		}
	}
</style>